<template>
    <div class="cq-con-energize">
      <cq-title imgUrl="title-energize.png" title="用科技为企业赋能" imgWidth="302" imgHeight="79"></cq-title>
      <div class="cq-energize-swiper w1160">
         <div class="cq-swiper-slider flex flex-between">
          <a href="javascript:;">金融行业</a>
          <a href="javascript:;">互联网行业</a>
          <a href="javascript:;">保险你好行业</a>
          <a href="javascript:;">汽车行业</a>
          <a href="javascript:;">传媒行业</a>
          <a href="javascript:;">通信行业</a>
         </div>
         <div clas="cq-swiper-content">
          <ul class="cq-swiper-pic">
              <li v-for="(item, key) in swiperList" :key="item.imgName" :class="{'cq-swiper-active': key == 1}">
                  <h3 class="cq-con-title">
                      <span class="visib-hid">{{ item.title }}</span>
                      <img :src="$utils.getImg(item.imgName)" width="218" height="55" alt="energize">
                  </h3>
                  <p>{{ item.tip }}</p>
              </li>
          </ul>
          <span class="cq-swiper-btn prev icon icon-swiper-prev flex flex-center"></span>
          <span class="cq-swiper-btn next icon icon-swiper-next flex flex-center"></span>
         </div>
      </div>
    </div> 
  </template>
  
  <script>
  import CqTitle from './cq-title.vue'
  export default {
    name: 'CqEnergize',
    components: { CqTitle },
    data() {
      return {
          swiperList: [
          {
            title: '中国联通',
            imgName: 'title-unicom.png',
            tip: '作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统。实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用1。'
          },
          {
            title: '中国银联',
            imgName: 'title-unionpay.png',
            tip: '作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统。实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用2。'
          },
          {
            title: '腾讯',
            imgName: 'title-Tencent.png',
            tip: '作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统。实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用3。'
          }
        ]
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .cq-con-energize {
      box-sizing: border-box;
      background: #fff url(@/assets/img/bg-energize.png) no-repeat center/cover;
      padding-top: 82px;
      padding-bottom: 112px;
  }
  
  .cq-swiper-slider {
      padding-bottom: 68px;
      & > a {
          width: 181px;
          height: 50px;
          background-color: #fff;
          box-shadow: 0 -1px 21px 0px rgba(192,192,192,0.35);
          border-radius: 25px;
          text-align: center;
          line-height: 50px;
          font-size: 18px;
          color: #333;
          &:hover {
              color: #fff;
              background-color: #ff7200;
          }
      }
  }
  
  .cq-swiper-content {
      position: relative;
      height: 452px;
      ul.cq-swiper-pic {
          position: absolute;
          width: 452px;
          background-color: #ffffff;
          box-shadow: 0px -1px 21px 0px rgba(144,113,113,0.3);
          & > p {
              padding: 60px 40px;
              text-indent: 2em;
              line-height: 30px;
              font-size: 14px;
              color: #666;
          }
          &:nth-of-type(1) {
              top: 30px;
              left: 50px;
              width: 500px;
              height: 391px;
              & > h3 {
                  text-align: left;
                  padding-left: 84px;
                  padding-top: 93px;
              }
              & > img {
                  width: 169px;
              height: auto;
              }
              &:nth-of-type(2) {
          text-align: center;
          z-index: 3;
          top: 0;
          left: 330px;
          width: 500px;
          height: 452px;
          & > h3 {
            padding-top: 86px;
          }
        }
        &:nth-of-type(3) {
          top: 30px;
          left: 610px;
          width: 500px;
          height: 391px;
          & > h3 {
            text-align: right;
            padding-right: 81px;
            padding-top: 93px;
            & > img {
              width: 160px;
              height: auto;
            }
          }
        }
          }
      }
  }
  
  .cq-energize-swiper {
      padding-top: 69px;
      .cq-swiper-btn {
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 53px;
          height: 53px;
          border-radius: 50%;
          background-color: #cbccce;
          cursor: pointer;
          opacity: 0.8;
      }
      .cq-swiper-btn.prev {
      left: -18px;
    }
    .cq-swiper-btn.next {
      right: -18px;
    }
    .cq-swiper-btn:hover {
      opacity: 1;
    }
  }
  
  .cq-swiper-active:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    content: '';
    width: 80px;
    height: 2px;
    background-color: #ff7200;
  }
  </style>
  